<template>
  <el-row id="app">
    <NavBar @change_tag="change_tag" :is_active="is_active"></NavBar>
    <el-row class="frame">
      <NodeAnalysis v-show="is_active===1" @change_tag="change_tag"></NodeAnalysis>
      <Retrieval v-if="is_active===2" :pkg_to_show="pkg_to_show" :platform="platform_to_show"></Retrieval>
      <VulnAnalysis v-show="is_active===3" @change_tag="change_tag"></VulnAnalysis>
    </el-row>
  </el-row>
</template>

<script>
import NavBar from  './components/modules/NavBar'
import Retrieval from './components/views/Retrieval'
import NodeAnalysis from './components/views/NodeAnalysis'
import VulnAnalysis from './components/views/VulnAnalysis'


export default {
  name: 'App',
  components: {
    NavBar,
    Retrieval,
    NodeAnalysis,
    VulnAnalysis
  },
  data() {
    return {
      is_active: 1,
      pkg_to_show: "",
      platform_to_show: "",
    }
  },
  methods: {
    change_tag: function (data) {
      this.is_active = data["to"]
      this.pkg_to_show = data["pkg"]
      this.platform_to_show = data["platform"]
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.frame {
  width: 80%;
  margin-left: 10%;
  margin-top: 4%;
}
</style>
